import { FC, CSSProperties } from 'react'
import './technologyList.scss'
import {} from 'windups'
interface Props {}
const technologyList: FC<Props> = () => {
  function randomLocation() {
    const top = `${Math.floor(Math.random() * 50 + 1)}vw`
    const left = `${Math.floor(Math.random() * 50 + 1)}vw`
    return {
      left,
      top,
      fontSize: `${Math.floor(Math.random() * 5 + 1)}vw`,
    }
  }
  const list: { style: CSSProperties; text: string }[] = [
    {
      style: {
        ...randomLocation(),
      },
      text: 'Golang',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'Webpack',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'JavaScript',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'Css',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'Vue',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'React',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'Typescript',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'NestJs',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'nodeJs',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'Babel',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'Nginx',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'WebAssembly',
    },
    {
      style: {
        ...randomLocation(),
      },
      text: 'Redux',
    },
  ]
  return (
    <div className='technologyList'>
      {list.map((listItem, listIndex) => {
        return (
          <span className='technologyListItem' style={listItem.style} key={listIndex}>
            {listItem.text}
          </span>
        )
      })}
    </div>
  )
}

export default technologyList
